<template>
    <div class="box">
      <div class="tab">
        <van-tabs v-model="active" :v-model="activeName" sticky @click="setTitle">
        <van-tab title="推荐" name="a"></van-tab>
        <van-tab title="官方" name="b"></van-tab>
        <van-tab title="欧美" name="c"></van-tab>
        <van-tab title="流行" name="d"></van-tab>
        <van-tab title="摇滚" name="e"></van-tab>
        <van-tab title="民谣" name="f"></van-tab>
        <van-tab title="电子" name="g"></van-tab>
      </van-tabs>
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          loading-text='加载中...'
          @load="onLoad"
        >
          <ul>
            <li v-for="(item, index) in kindlist" :key="index">
              <div class="list" @click="page(item.id)">
                <img :src="item.coverImgUrl" alt="">
                <p>{{item.name}}</p>
              </div>
            </li>
          </ul>
        </van-list>
      </van-pull-refresh>
  </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { getToplist, getkindlist } from '@/api'
import { Tab, Tabs, List, Toast, PullRefresh } from 'vant'
Vue.use(Tab)
Vue.use(Tabs)
Vue.use(Toast)
Vue.use(List)
Vue.use(PullRefresh)
export default {
  data () {
    return {
      activeName: 'a',
      active: 2,
      title: '',
      kindlist: [],
      // 下拉就改为true更新完成改为false、
      loading: false,
      // 如果加载完就改为true
      finished: false,
      // 设置页面为1
      offset: 0 * 1,
      isLoading: false,
      cat: ''
    }
  },
  // 实例挂载
  mounted () {
    getToplist().then(res => {
      if (res.data.code === 200) {
        this.kindlist = res.data.playlists
      }
    })
  },
  methods: {
    setTitle (name, title) {
      if (title === '推荐') {
        title = '全部'
      }
      this.title = title
      getToplist({ cat: this.title }).then(res => {
        if (res.data.code === 200) {
          this.kindlist = res.data.playlists
        }
      })
      getkindlist({ cat: this.title }).then(res => {
        if (res.data.code === 200) {
          this.kindlist = res.data.playlists
        }
      })
    },
    page (id) {
      this.$router.push({ name: 'detail', params: { id } })
      localStorage.setItem('id', id)
    },
    onLoad () {
      this.loading = true
      getToplist({ limit: 100, cat: this.title, offset: this.offset * 1 }).then(set => {
        // 结束加载
        this.loading = false
        // 判断长度
        if (set.data.playlists.length === 0) {
          // 便是加载结束
          this.finished = true
        } else {
          // 继续加载 合并数据
          this.kindlist = [...this.kindlist, ...set.data.playlists]
          this.finished = false
          this.offset += 1
        }
      })
    },
    onRefresh () {
      setTimeout(() => {
        Toast('刷新成功')
        this.isLoading = false
        this.count++
      }, 1000)
    }
  }
}
</script>

<style lang="scss" scoped>
html,body{
   background: #222!important,
}
// .content{
//   padding: 0.1rem;
// }
.box{
  .tab{
    margin-top: 0.4rem;
    background: #222;
    ul{
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-content: center;
      margin-top: 0.1rem;
      background: #222;
      li{
        width: 0.9rem;
        height: 1.5rem;
        margin-right: 0.1rem;
        overflow: hidden;
        .list{
          img{
            width: 1rem;
            // border-radius: 0.1rem
          }
          p{
            display: block;
            height: 0.3rem;
            margin-top: 0.1rem;
            text-align: center;
            font-size: 0.1rem;
            font-weight:initial;
            color: rgba(255, 255, 255, 0.753);
            white-space:nowrap;
            overflow:hidden;
            text-overflow:ellipsis;
            line-height: 0.3rem;
          }
        }
      }
    }
  }
}
/deep/.van-tab--active{
  color: #ffcd32;
}
/deep/.van-tabs__line{
  background-color: #ffcd32;
}
/deep/.van-tabs__nav--line{
  background: #6464;
}
</style>
